<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="search">
      <el-form ref="search" :inline="true" :model="search">
        <!-- 工单编号 -->
        <el-form-item label="工单编号:" size="medium">
          <el-input v-model="search.taskCode" clearable placeholder="请输入" />
        </el-form-item>
        <!-- 工单状态 -->
        <el-form-item label="工单状态:" size="medium">
          <el-select v-model="search.status" clearable placeholder="请选择">
            <el-option
              v-for="item in taskStatus"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            />
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          class="my-primary1"
          icon="el-icon-search"
          @click="searchFn"
        >查询</el-button>
      </el-form>
    </div>

    <!-- 表单区域 -->
    <div class="result">
      <!-- 头部 -->
      <el-row class="operation">
        <el-button
          type="primary"
          class="my-primary2"
          icon="el-icon-circle-plus-outline"
          @click="showAddFormDialog"
        >新建
        </el-button>
        <el-button
          type="primary"
          class="my-secondary"
          @click="showTaskConfigDialog"
        >工单配置</el-button>
      </el-row>
      <!-- 表单主体 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          :index="(index) => (search.pageIndex - 1) * 10 + (index + 1)"
          label="序号"
          width="80"
        />
        <el-table-column prop="taskCode" label="工单编号" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="taskType.typeName" label="工单类型" />
        <el-table-column prop="createType" label="工单方式" />
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          label="工单状态"
        />
        <el-table-column prop="userName" label="运营人员" />
        <el-table-column prop="createTime" label="创建日期" width="160" />
        <el-table-column label="操作" width="100">
          <template v-slot="{ row }">
            <el-button
              type="text"
              class="el-button--primary-text"
              @click.native="showTaskDetailDialog(row.taskId)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表单底部 -->
      <div class="pagination-container">
        <el-pagination
          layout="slot,prev,next"
          :current-page.sync="search.pageIndex"
          prev-text="上一页"
          next-text="下一页"
          background
          :total="totalCount"
          :page-size="search.pageSize"
          @current-change="getTaskList"
        >
          <template order="-1">
            <span
              class="el-pagination__total"
            >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
              totalPage
            }}
              页</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 新建工单弹窗 -->
    <el-dialog title="新增工单" :visible.sync="addFormDialog" width="630px">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px">
        <el-form-item label="设备编号：" prop="innerCode">
          <el-input
            v-model="addForm.innerCode"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            show-word-limit
            maxlength="15"
            @change="getOperatorList"
          />
        </el-form-item>
        <el-form-item label="工单类型：" prop="productType">
          <el-select
            v-model="addForm.productType"
            placeholder="请选择"
            style="width: 396px"
          >
            <el-option
              v-for="item in taskTypeList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量：">
          <el-button
            type="text"
            icon="el-icon-edit-outline"
            @click="showAddGoods"
          >补货清单</el-button>
        </el-form-item>
        <el-form-item label="运营人员：" prop="operatorList">
          <el-select
            v-model="addForm.assignorId"
            placeholder="请选择"
            style="width: 396px"
          >
            <el-option
              v-for="item in operatorList"
              :key="item.userId"
              :label="item.userName"
              :value="addForm.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="desc">
          <el-input
            v-model="addForm.desc"
            maxlength="40"
            show-word-limit
            style="width: 396px"
            type="textarea"
            :rows="3"
            placeholder="请输入备注（不超过40字）"
          />
        </el-form-item>
        <div class="dialog-footer">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="12">
              <el-button
                class="my-secondary"
                @click="addFormDialog = false"
              >取 消</el-button>
              <el-button
                type="primary"
                class="my-primary2"
                style="margin-left: 34px"
                @click="addFormDialog = false"
              >确 定</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <!-- 内层补货详情弹窗 -->
      <el-dialog
        title="补货详情"
        :visible.sync="addGoodsDetailDialog"
        width="630px"
        append-to-body
      >
        <!-- 中间滚动的内容 -->
        <el-scrollbar style="height: 330px;overflow-x: hidden">
          <el-table :data="channelList" style="width: 568px; margin: 0px auto">
            <el-table-column property="channelCode" label="货道编号" />
            <el-table-column property="sku.skuName" label="商品名称" />
            <el-table-column property="currentCapacity" label="当前数量" />
            <el-table-column property="maxCapacity" label="还可添加" />
            <el-table-column label="补满数量" width="200px">
              <template v-slot="{ row }">
                <el-input-number
                  v-if="row.sku"
                  v-model="row.sku.capacity"
                  controls-position="right"
                  :min="row.maxCapacity - row.currentCapacity"
                  :max="row.maxCapacity"
                />
                <span v-else>货道暂无商品</span>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <!-- 底部button -->
        <template #footer>
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="12">
              <el-button
                class="my-secondary"
                @click="addGoodsDetailDialog = false"
              >取 消</el-button>
              <el-button
                type="primary"
                class="my-primary2"
                style="margin-left: 34px"
                @click="addGoodsDetailDialog = false"
              >确 定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </el-dialog>

    <!-- 工单配置 -->
    <el-dialog title="工单配置" :visible.sync="taskConfigDialog" width="630px">
      <el-form :model="taskConfig" label-width="140px">
        <el-form-item label="补货警戒线">
          <el-input-number
            v-model="taskConfig.alertValue"
            controls-position="right"
            :min="10"
            :max="100"
            placeholder="请输入"
            style="width: 396px"
          />
        </el-form-item>
        <el-form-item label-width="0">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="12">
              <el-button
                class="my-secondary"
                @click="taskConfigDialog = false"
              >取 消</el-button>
              <el-button
                type="primary"
                class="my-primary2"
                style="margin-left: 34px"
                @click="taskConfigFn"
              >确 定</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 工单详情 -->
    <el-dialog title="工单详情" :visible.sync="taskDetailDialog" width="630px">
      <div class="task-status">
        <img
          class="icon"
          src=""
          alt=""
        >
        <span class="status">取消</span>
        <img
          src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
          alt=""
          class="pic"
        >
      </div>

      <el-form :model="taskDetail" class="taskDetail">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建日期：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取消日期：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运营人员：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单类型：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补货数量：" label-width="120px">
              <el-button type="text">补货详情</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单方式：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取消原因：" label-width="120px">
              01000061
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col>
          <el-button
            class="my-secondary"
            @click="taskConfigDialog = false"
          >重新创建</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
import store from '@/store'
import { getChannelList } from '@/api/vm'
import { getOperatorList } from '@/api/user'
import { getTaskList, createTask, getTaskStatus, getAlertValue, setAlertValue, getTaskTypeList } from '@/api/taskservice'
export default {
  name: 'BusinessContainer',
  data() {
    return {
      search: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false,
        taskCode: '',
        status: ''
      },
      rules: {
        innerCode: [{ required: true, message: '请输入', trigger: 'change' }],
        productType: [{ required: true, message: '请选择', trigger: 'change' }],
        userId: [{ required: true, message: '请选择', trigger: 'change' }],
        desc: [{ required: true, message: '请输入', trigger: 'change' }]
      },
      addForm: {
        createType: 1, // 创建类型
        assignorId: '', //
        innerCode: '', // 设备编号
        userId: store.getters.userId, // 执行人id
        productType: '', // 工单类型
        desc: '', // 描述信息
        details: [] // 补货信息
      },
      taskConfig: {
        alertValue: '' // 补货预警值
      },
      operatorList: [], // 运营人员名单
      channelList: [], // 货道列表
      taskTypeList: [], // 工单类型
      tableData: [], // 列表数据
      taskStatus: [], // 工单状态
      totalCount: 0, // 总工单条数
      totalPage: 0, // 总页数
      addFormDialog: false, //
      taskConfigDialog: false, // 工单配置弹窗
      taskDetailDialog: false, // 查看详情弹窗
      addGoodsDetailDialog: false, // 内层补货弹窗
      addFormTextarea: '' //
    }
  },
  created() {
    this.getTaskList()
    this.getTaskStatus()
  },
  methods: {
    // 获取工单状态列表
    async getTaskStatus() {
      this.taskStatus = await getTaskStatus()
    },
    // 新建工单
    async createTask() {
      const res = createTask({
      })
      console.log(res)
    },
    // 获取工单列表
    async getTaskList() {
      const { currentPageRecords, totalCount, totalPage } = await getTaskList({
        ...this.search
      })
      this.totalPage = +totalPage
      this.totalCount = +totalCount
      // console.log(res)
      // 遍历数组处理数据
      this.tableData = currentPageRecords.map((item) => {
        item.createType = item.createType ? '手动' : '自动'
        item.createTime = moment(item.createTime).format('YYYY.MM.DD HH:mm:ss')
        return item
      })
    },
    showTaskDetailDialog(id) {
      this.taskDetailDialog = true
      console.log(id)
    },
    async showAddFormDialog() {
      this.addFormDialog = true
      // 调用工单状态列表
      const res = await getTaskTypeList({ ...this.taskConfig })
      // console.log(res)
      this.taskTypeList = res.filter(item => item.type === 2)
      // 如果设备编号存在，就可以调用接口获取运营人员名单和点开补货清单
      this.$refs.addForm.validateField()
    },
    async showTaskConfigDialog() {
      this.taskConfigDialog = true
      this.taskConfig.alertValue = await getAlertValue({ ...this.taskConfig })
    },
    // 工单配置设置预警阈值
    async taskConfigFn() {
      await setAlertValue({ ...this.taskConfig })
      this.taskConfigDialog = false
    },
    // 搜索
    searchFn() {
      this.search.pageIndex = 1
      this.getTaskList()
    },
    async showAddGoods() {
      this.$refs.addForm.validateField('innerCode', async(errorMessage) => {
        // 判断设备编号校验是否通过
        if (!errorMessage) {
          this.addGoodsDetailDialog = true
          this.channelList = await getChannelList(this.addForm.innerCode)
          // console.log(res)
        }
      })
    },
    // 获取运营人员名单
    async getOperatorList() {
      this.operatorList = await getOperatorList(this.addForm.innerCode)
      // console.log(this.operatorList)
    },
    taskDetail() {}
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";
.search .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item__label {
  font-weight: normal;
}

.taskDetail .el-form-item {
  margin-bottom: 0;
}

</style>
